<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.modern.min.js" ></script>
        <script>
            var ret
            var model = avalon.define({
                $id: "test",
                array: [1, 2, 3, 4, 5, 6, 7, 8],
                stop: function(){
                    ret = false
                },
                click: function(a) {
                    var index = Math.floor(Math.random() * 8)
                    model.array.set(index, new Date - 0)
                }
            })
            var old = model.$model.array.concat()
            avalon.tick(function() {
                console.log("tick...")
                var now = model.$model.array.concat()
                for (var i = 0, n = now.length; i < n; i++) {
                    if (now[i] !== old[i]) {
                        console.log("第" + i + "个元素发生变化: " + old[i] + " --> " + now[i])
                    }
                }
                old = now
                return ret
            })

        </script>
        <style>
            .ms-hover div:hover{
                background:yellowgreen;
            }
        </style>
    </head>
    <!-- 如果你一定要监听数组每个元素的变化，可以使用1.3.4新添加的tick函数，这是一个心跳检测，
    只要函数返回false就会从检测列队中移除。
    由于是每30ms检测一次，非常耗性能，因此不用时记得移除。 -->

    <!-- 稍微说一下 $unwatch的用法，这个不太常用。
    如果它传入两个参数，第一个为属性名，第二个为回调，那么就会移除此用户，
    如果只传入此属性名，则移除此属性的所有监听函数。
    如果什么也不传，那么就会临时中断此ViewModel的属性监听功能，所有$watch回调都不会触发。
    想恢复也很简单，调用$watch方法，也是什么也不传。 -->
    <body ms-controller="test" class='ms-hover'>
        <div ms-click="click('array')">
            <div ms-repeat='array'>{{el}}</div>
        </div>
        <button type='button' ms-click='stop'>移除此监听器</button>
    </body>
</html>